<template>
    <div class="table">
        <div class="btn">
            <div class="btn_item" @click="addDialog">
                <img class="btn_icon" src="@/assets/images/images_new/add_icon.png" alt="">
                <span>新增</span>
            </div>
            <div class="btn_item">
                <img class="btn_icon" src="@/assets/images/images_new/del_icon.png" alt="">
                <span>删除</span>
            </div>
            <div class="btn_item" @click="Export">
                <img class="btn_icon" src="@/assets/images/images_new/export_icon.png" alt="">
                <span>导出</span>
            </div>
        </div>

        <div class="tableBg">
            <el-table ref="tableRef" :data="state.tableData" style="width: 100%;" stripe empty-text='暂无数据'
                :max-height="table_height" :scrollbar-always-on="true" @selection-change="handleSelectionChange">

                <el-table-column type="index" label="序号" width="58" />
                <el-table-column prop="createName" label="会议地点"
                    :min-width="flexWidth('createName', state.tableData, '会议地点')" />
                <el-table-column prop="createName" label="主持人"
                    :min-width="flexWidth('createName', state.tableData, '主持人')" />
                <el-table-column prop="createName" label="班组名称"
                    :min-width="flexWidth('createName', state.tableData, '班组名称')" />
                <el-table-column prop="type" label="班会类型" :min-width="flexWidth('type', state.tableData, '班会类型')">
                    <template #default="scope: any">

                        <span>{{ }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="召开日期" width="180" />
                <el-table-column prop="createName" label="班会小结"
                    :min-width="flexWidth('createName', state.tableData, '班会小结')" />
                <el-table-column prop="createName" label="出勤情况"
                    :min-width="flexWidth('createName', state.tableData, '出勤情况')" />
                <el-table-column prop="createName" label="出勤人员"
                    :min-width="flexWidth('createName', state.tableData, '出勤人员')" />
                <el-table-column prop="createName" label="未出勤人员"
                    :min-width="flexWidth('createName', state.tableData, '未出勤人员')" />
                <el-table-column prop="name" label="操作" width="100" class-name="fixed_column" fixed="right">
                    <template #default="scope: any ">
                        <div class="btn_ative" title="编辑" @click="editDetails(scope.row)">
                            <img class="operation_btn" src="@/assets/images/images_new/details_icon.png" alt="">
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="common_pagination">
                <CommonPagination2 :pageNum="searchData.pageNum" :pageSize="searchData.pageSize" :pageTotal="total"
                    @pageFunc="pageFunc" @sizeChange="sizeChange"></CommonPagination2>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { flexWidth } from '@/utils/utils'

// 页码及搜索数据
let searchData = reactive({
    pageNum: 1, //当前页
    pageSize: 10, //每页条目数
    params: {
        content: '', // 变更内容
        createName: '', // 操作人
        createTimeEnd: '', // 操作时间结束
        createTimeStart: '', // 操作时间开始
        spaceId: '', // 房间/工位id
        type: '', // 变更类型(1-新增,2-编辑,3-删除,4-导入
    }
})

const state = reactive({
    tableData: [],
})

let total = ref(0);

//页数改变事件(上一页,下一页,跳转到某一页)
const pageFunc = (pageNum: number) => {
    searchData.pageNum = pageNum;
    // getList(); //更新表格列表
}

//每页条数改变
const sizeChange = (pageSize: number) => {
    searchData.pageSize = pageSize;
    // getList(); //更新表格列表
}


//导出
const Export = () => {
}

const handleSelectionChange = (val: any) => {
    let list = [] as Array<string>;
    if (val) {
        val.forEach((item: any) => {
            list.push(item.id);
        })
    }
    // multipleSelection.list = list;
    // state.delData = list
}

let table_height = ref(0);

//获取表格最大高度 table_height
const getTabHeight = () => {
    let page = document.getElementById('teamMeeting');
    let pageHeight = page!.offsetHeight;
    let searchBar = document.getElementById('run_searchBar');
    let searchBarHeight = searchBar!.offsetHeight;
    table_height.value = pageHeight - searchBarHeight - 150;

}
onMounted(() => {
    nextTick(() => {
        getTabHeight()
        window.addEventListener("resize", getTabHeight);//监听屏幕变化,重新计算表格高度
    })

})
onBeforeUnmount(() => {
    window.removeEventListener("resize", getTabHeight); // 销毁绑定方法
})

//emit(父组件中的自定义方法)
const emit = defineEmits(['showAddDialog', 'showEditDialog', 'getTotal']);

// 打开新增弹窗  
const addDialog = () => {
  emit("showAddDialog");
}

// 打开编辑弹窗
const editDetails = (row: any) => {
    emit("showEditDialog", row);
}
</script>


<style lang="scss" scoped>
.table {
    height: calc(100% - 146px);

    .btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 40px;
        padding-right: 25px;
        color: rgb(112, 105, 95);
        font-size: 14px;

        .btn_item {
            display: flex;
            align-items: center;
            margin-left: 10px;
            cursor: pointer;
            height: 28px;
            line-height: 28px;
            padding: 0 10px 0 8px;

            &:hover {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 2px;
            }

            .btn_icon {
                width: 18px;
                margin-right: 6px;
            }
        }
    }

    .tableBg {
        background-color: #fff;
        border-radius: 8px;
        height: calc(100% - 40px);
        overflow: hidden;
    }

    .w58 {
        width: 58px;
        height: 24px;
        font-size: 14px;
    }

    .w110 {
        width: 110px;
    }


    .el-table {
        font-size: 13px;
        text-align: center;

        .checkbox_img {
            cursor: pointer;
        }

        .el-switch {
            height: 20px;
            opacity: 1;

            :deep(.el-switch__core) {
                cursor: pointer;
            }
        }

        :deep(.el-switch-default) {
            cursor: default;

            .el-switch__core {
                border: 0;
                cursor: not-allowed;
            }
        }
    }

    :deep(.el-table .success-row) {
        background-color: rgba(112, 105, 95, 0.1);
    }

    .btn_ative {
        width: 35px;
        height: 35px;
        line-height: 35px;
        cursor: pointer;
        display: inline-block;
        margin-right: 10px;
        text-align: center;
        margin-top: 7.5px;
        padding-top: 5px;

        &:last-child {
            margin-right: 0;
        }

        &:hover {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 2px;
        }

        .operation_btn {
            height: 20px;

        }
    }

    .common_pagination {
        position: absolute;
        right: 50px;
        bottom: 40px;
    }
}
</style>